<template>
    <div>
        <div style="margin-bottom: 5px">
            <el-input v-model="inputName" placeholder="please input name" style="width: 200px" suffix-icon="el-icon-search"
                      @keyup.enter.native="loadPost">
            </el-input>
            <el-select v-model="selectSex" filterable placeholder="please select gender" style="margin-left: 7px">
                <el-option
                        v-for="item in sexs"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <el-button type="success" style="margin-left: 7px" @click="loadPost">查询</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
            <el-button type="success" style="margin-left: 7px" @click="addUser">新增</el-button>

        </div>

        <el-table :data="tableData" :stripe="stripeTrue" :border="borderTrue"
                  :header-cell-style="{background:'rgba(209,209,245,0.28)'}">
            <el-table-column prop="id" label="ID">
            </el-table-column>
            <el-table-column prop="name" label="姓名">
            </el-table-column>
            <el-table-column prop="age" label="年龄">
            </el-table-column>
            <el-table-column prop="sex" label="性别">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.sex === 1 ? 'primary' : 'danger'"
                            disable-transitions>{{scope.row.sex === 1 ? '男' : '女'}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号码">
            </el-table-column>
            <el-table-column prop="roleId" label="角色">
                <template slot-scope="scope">
                    <el-tag
                            :type="scope.row.roleId === 0 ? 'danger' : (scope.row.roleId === 1 ? 'success' : 'primary')"
                            disable-transitions>{{scope.row.roleId === 0 ? '超级管理员' : (scope.row.roleId === 1 ? '管理员' : '用户')}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="operate" label="操作">
                <template slot-scope="scope">
                    <el-button size="small" type="success" @click="mod(scope.row)">编辑<i style="margin-left: 5px" class="el-icon-edit"></i></el-button>

                    <el-popconfirm style="margin-left: 5px"
                                   confirm-button-text='确定'
                                   cancel-button-text='取消'
                                   icon="el-icon-question"
                                   icon-color="#cebdee"
                                   title="确定删除吗？"
                                   @confirm="del(scope.row.id)"
                    >
                        <el-button slot="reference" size="small" type="danger">删除<i style="margin-left: 5px" class="el-icon-delete"></i></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination style="margin-top: 5px; text-align: center"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="pageNum"
                       :page-sizes="[7, 10, 15,20]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>

        <el-dialog
                :title="addOrUpdate + ''"
                :visible.sync="centerDialogVisible"
                width="30%"
                :before-close="handleClose"
                center>
            <el-form ref="form" :rules="rules" :model="form" label-width="80px">
                <el-form-item label="账号：" prop="no">
                    <el-col :span="20">
                        <el-input v-model="form.no"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="名字：" prop="name">
                    <el-col :span="20">
                        <el-input v-model="form.name"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="密码：" prop="password">
                    <el-col :span="20">
                        <el-input v-model="form.password"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="年龄：" prop="age">
                    <el-col :span="20">
                        <el-input v-model="form.age"></el-input>
                    </el-col>
                </el-form-item>
                <el-form-item label="性别：" prop="sex">
                    <el-radio-group v-model="form.sex">
                        <el-radio label="1">男</el-radio>
                        <el-radio label="0">女</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="电话：" prop="phone">
                    <el-col :span="20">
                        <el-input v-model="form.phone"></el-input>
                    </el-col>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
    <el-button @click="centerDialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveAdd">确 定</el-button>
   </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "UserManger",
        data() {

            let checkAge = (rule, value, callback) => {
                if(value>150){
                    callback(new Error('年龄输入过大'));
                }else{
                    callback();
                }
            };

            let checkDuplicate =(rule,value,callback)=>{
                if(this.form.id){
                    return callback();
                }
                this.$axios.get(this.$httpUrl+'/user/findByNo?no=' + this.form.no).then(res=>res.data).then(res=>{
                    if(res.code==200){
                        callback(new Error('账号已经存在'));
                    }else{
                        callback();
                    }
                })
            };

            return {

                tableData: [],
                stripeTrue:true,
                borderTrue:true,
                pageSize: 10,
                pageNum: 1,
                total:0,
                inputName:'',
                selectSex:'',
                sexs:[
                    {
                        value: '1',
                        label: '男'
                    },{
                        value: '0',
                        label: '女'
                    }
                ],

                addOrUpdate:String,

                centerDialogVisible:false,

                form:{
                    name: '',
                    no:'',
                    password:'',
                    age:'',
                    sex:'',
                    roleId:'2',
                    phone:''
                },
                rules: {
                    no: [
                        {required: true, message: '请输入账号', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'},
                        {validator:checkDuplicate,trigger: 'blur'}

                    ],
                    sex: [
                        {required: true, message: '请选择性别', trigger: 'blur'},
                    ],
                    name: [
                        {required: true, message: '请输入名字', trigger: 'blur'},
                        {min: 1, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    password: [
                        {required: true, message: '请输入密码', trigger: 'blur'},
                        {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
                    ],
                    age: [
                        {required: true, message: '请输入年龄', trigger: 'blur'},
                        {min: 1, max: 3, message: '长度在 1 到 3 个位', trigger: 'blur'},
                        {pattern: /^([1-9][0-9]*){1,3}$/,message: '年龄必须为正整数字',trigger: "blur"},
                        {validator:checkAge,trigger: 'blur'}
                    ],
                    phone: [
                        {required: true,message: "手机号不能为空",trigger: "blur"},
                        {pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: "请输入正确的手机号码", trigger: "blur"}
                    ]
                }

            }
        },

        methods:{

            mod(row){

                this.centerDialogVisible = true;

                this.addOrUpdate = '修改用户';

                this.$nextTick(()=>{

                    //赋值到表单
                    this.form.id = row.id;
                    this.form.no = row.no;
                    this.form.name = row.name;
                    this.form.password = '';
                    this.form.age = row.age +'';
                    this.form.sex = row.sex + '';
                    this.form.phone = row.phone;
                    this.form.roleId = row.roleId;
                })
            },
            del(id){
                this.$axios.get(this.$httpUrl + '/user/del?id='+id).then(res=>res.data).then(res=>{

                    if (res.code==200){
                        this.$message({
                            message: '删除成功！',
                            type: 'success'
                        });

                        this.loadPost();

                    }else{
                        this.$message({
                            message: '删除失败！',
                            type: 'error'
                        });
                    }
                })
            },

            resetForm() {
                this.$refs.form.resetFields();
            },
            handleClose(done) {
                this.$confirm('数据还未提交，确定关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },

            saveAdd(){

                this.$refs.form.validate((valid) => {
                    if (valid) {

                        if (this.form.id){
                            this.doMod();
                        }else{
                            this.doSave();
                        }

                    } else {
                        this.$message({
                            message: '请将信息填完整！',
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },

            doMod(){
                this.$axios.post(this.$httpUrl + '/user/mod',this.form).then(res=>res.data).then(res=>{

                    if (res.code==200){
                        this.$message({
                            message: '修改成功！',
                            type: 'success'
                        });

                        this.centerDialogVisible= false;
                        this.loadPost();

                    }else{
                        this.$message({
                            message: '修改失败！',
                            type: 'error'
                        });
                    }

                })
            },

            doSave(){
                this.$axios.post(this.$httpUrl + '/user/save',this.form).then(res=>res.data).then(res=>{

                    if (res.code==200){
                        this.$message({
                            message: '添加成功！',
                            type: 'success'
                        });

                        this.centerDialogVisible= false;
                        this.loadPost();

                    }else{
                        this.$message({
                            message: '添加失败！',
                            type: 'error'
                        });
                    }
                })
            },

            addUser(){
                this.centerDialogVisible = true;
                this.addOrUpdate = '添加用户';

                this.$nextTick(()=>{
                    this.resetForm()
                })
            },
            reset(){
                this.inputName='';
                this.selectSex='';
                this.loadPost()
            },

            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageNum = 1;
                this.pageSize = val;
                this.loadPost();

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.pageNum = val;
                this.loadPost();
            },

            loadPost(){
                this.$axios.post(this.$httpUrl + '/user/diyListPage',{
                    pageSize: this.pageSize,
                    pageNum: this.pageNum,

                    param:{
                        name: this.inputName,
                        sex:this.selectSex,
                        roleId: '2'
                    }

                }).then(res=>res.data).then(res=>{
                    console.log(res);

                    if (res.code==200){
                        this.tableData = res.data
                        this.total = res.total
                    }else{
                        this.$message.error("获数据失败！")
                    }

                })
            }
        },
        beforeMount() {
            this.loadPost();
        }
    }
</script>

<style scoped>
    .el-table-column{
        text-align: center;
        margin: auto;
    }
</style>